<!DOCTYPE html>
<html>
<head>
    <title th:text="${application.wgName}">WGClOUD监控系统</title>
  <div  th:replace="common/header.html"></div>


</head>
<body class="hold-transition sidebar-mini layout-fixed">
<div th:replace="common/chart.html"></div>

<div class="wrapper">



  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper" style="margin-left: 10px;font-size:0.92rem">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">

            <div class="col-sm-6">
                <a href="###"  target="_blank">
                    <img th:src="${application.logoUrl}" style="height:25px;width:25px;opacity: .8" class="brand-image img-circle elevation-3">&nbsp;<span th:text="${application.wgName}">CLOUDTI</span>
                </a>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item "><a href="/wgcloud/dash/main?dashView=1">监控概要</a></li>
                    <li class="breadcrumb-item "><a href="/wgcloud/systemInfo/systemInfoList?dashView=1">主机列表</a></li>
                   <!-- <li class="breadcrumb-item active"><a  target="_blank" href="https://###/elasticsearch-head/index.html">ES监控工具</a></li>-->
                </ol>
            </div>
        </div>
      </div><!-- /.container-fluid -->
    </section>

    <!-- Main content -->
    <section class="content">
      <div class="container-fluid">
        <div class="row">

  <div class="col-md-12">
    <div class="card card-primary">
      <div class="card-header">
        <h3 class="card-title" ><span th:text="${systemInfo.hostname}"></span>
            <th:block th:if="${systemInfo.remark ne '' && systemInfo.remark ne null}">
                （备注：<span th:text="${systemInfo.remark}"></span>）
            </th:block>
        </h3>
          <div class=" float-sm-right">
              <a href="javascript:history.back()">返回</a>
          </div>
      </div>


        <div class="row">
            <div class="col-12 table-responsive">
                <table class="table table-striped"><tbody><tr><td width="3%">
                <select  th:onchange="viewDatetDashView([[${systemInfo.id}]],'am1')" class="form-control" id="searchDate">
                    <th:block th:each="item : ${dateList}">
                    <option th:value="${item}" th:text="${item}">option 1</option>
                    </th:block>
                </select>
                    </td>

                    <th:block th:each="item : ${amList}">
                        <th:block th:if="${item.code eq  am}">
                            <td width="2%" style="vertical-align:bottom;"> <button type="button" title="当前已显示该时间段图表" class="btn btn-block btn-outline-danger btn-sm disabled" th:text="${item.msg}">Primary</button></td>
                        </th:block>
                        <th:block th:unless="${item.code eq  am}">
                            <td width="2%" style="vertical-align:bottom;"> <button type="button"  th:onclick="viewDatetDashView([[${systemInfo.id}]],[[${item.code}]])" class="btn btn-block btn-outline-primary btn-sm" th:text="${item.msg}">Primary</button></td>
                        </th:block>
                    </th:block>

                    </tr></tbody></table>

            </div>
            <!-- /.col -->
        </div>
        <label style="margin-left: .9rem">cpu使用率%</label>
        <div id="cpuStateJson"></div>

        <label style="margin-left: .9rem">内存使用率%</label>
        <div id="memStateJson"></div>

        <label style="margin-left: .9rem">网络接收/发送，KB/秒</label>
        <div id="netIoStateByt"></div>

        <label style="margin-left: .9rem">网络接收/发送，包数/秒</label>
        <div id="netIoStatePck"></div>

        <label style="margin-left: .9rem">网络传入/传出，丢弃包数/秒</label>
        <div id="netIoStateDropPck"></div>

        <label style="margin-left: .9rem">系统负载</label>
        <div id="ysLoadSstateJson"></div>
    </div>
    <!-- /.card -->


  </div>

        </div>
      </div>
    </section>
  </div>


  <div th:replace="common/footerDashView.html"></div>

</div>
<!-- ./wrapper -->

<script th:src="@{'/static/js/host.js'}"></script>


<script th:inline="javascript">
    $(document).ready(function(){
        $("#searchDate").val([[${datenow}]]);
    });
    var cpuStateJson =[[${cpuStateList}]];
    var memStateJson =[[${memStateList}]];
    var ysLoadSstateJson =[[${ysLoadSstateList}]];
    var netIoStateJson =[[${netIoStateList}]];
    $(function(){
        var chart = new G2.Chart({
            container: 'cpuStateJson',
            forceFit: true,
            height: 400,
            padding: [30, 40, 70, 40]
        });

        chart.axis('dateStr', {
            label: {
                textStyle: {
                    fill: '#aaaaaa'
                }
            }
        });
        chart.tooltip({
            crosshairs: false
        });
        chart.legend({
            position: 'top-center'
        });

        chart.source(cpuStateJson, {
            sys: {
                alias: '使用率'
            }
        });
        chart.scale('dateStr',{tickCount: 12,alias: '时间'});
        chart.line().position('dateStr*sys').color('#1890ff');
        chart.render();

        var chart2 = new G2.Chart({
            container: 'memStateJson',
            forceFit: true,
            height: 400,
            padding: [30, 40, 70, 40]
        });
        chart2.axis('dateStr', {
            label: {
                textStyle: {
                    fill: '#aaaaaa'
                }
            }
        });
        chart2.axis('usePer', {
            label: {
                textStyle: {
                    fill: '#aaaaaa'
                }
            }
        });
        chart2.tooltip({
            crosshairs: false
        });
        chart2.legend({
            position: 'top-center'
        });
        chart2.source(memStateJson, {
            usePer: {
                alias: '使用率'
            }
        });
        chart2.scale('dateStr',{tickCount: 12,alias: '时间'});
        chart2.line().position('dateStr*usePer').color('#1890ff');
        chart2.render();

        var chart3 = new G2.Chart({
            container: 'ysLoadSstateJson',
            forceFit: true,
            height: 400,
            padding: [30, 40, 70, 40]
        });
        chart3.axis('dateStr', {
            label: {
                textStyle: {
                    fill: '#aaaaaa'
                }
            }
        });
        chart3.axis('fiveLoad', false);
        chart3.axis('fifteenLoad', false);
        chart3.tooltip({
            crosshairs: false
        });
        chart3.legend({
            position: 'top-center'
        });
        chart3.source(ysLoadSstateJson, {
            oneLoad: {
                alias: '1分钟',
                min: 0,
                max: [[${ysLoadSstateMaxVal}]]
            },
            fiveLoad: {
                alias: '5分钟',
                min: 0,
                max: [[${ysLoadSstateMaxVal}]]
            },
            fifteenLoad: {
                alias: '15分钟',
                min: 0,
                max: [[${ysLoadSstateMaxVal}]]
            }
        });
        chart3.scale('dateStr',{tickCount: 12,alias: '时间'});
        chart3.line().position('dateStr*oneLoad').color('#1890ff');
        chart3.line().position('dateStr*fiveLoad').color('#2fc25b');
        chart3.line().position('dateStr*fifteenLoad').color('#ffca0b');
        chart3.render();

        var chart4 = new G2.Chart({
            container: 'netIoStateByt',
            forceFit: true,
            height: 400,
            padding: [30, 40, 70, 48]
        });
        chart4.axis('dateStr', {
            label: {
                textStyle: {
                    fill: '#aaaaaa'
                }
            }
        });
        chart4.axis('txbyt', false);
        chart4.tooltip({
            crosshairs: false
        });
        chart4.legend({
            position: 'top-center'
        });
        chart4.source(netIoStateJson, {
            rxbyt: {
                alias: '接收KB/秒',
                min: 0,
                max: [[${netIoStateBytMaxVal}]]
            },
            txbyt: {
                alias: '发送KB/秒',
                min: 0,
                max: [[${netIoStateBytMaxVal}]]
            }
        });
        chart4.scale('dateStr',{tickCount: 12,alias: '时间'});
        chart4.line().position('dateStr*rxbyt').color('#1890ff');
        chart4.line().position('dateStr*txbyt').color('#2fc25b');
        chart4.render();


        var chart5 = new G2.Chart({
            container: 'netIoStatePck',
            forceFit: true,
            height: 400,
            padding: [30, 40, 70, 48]
        });
        chart5.axis('dateStr', {
            label: {
                textStyle: {
                    fill: '#aaaaaa'
                }
            }
        });
        chart5.axis('txpck', false);
        chart5.tooltip({
            crosshairs: false
        });
        chart5.legend({
            position: 'top-center'
        });
        chart5.source(netIoStateJson, {
            rxpck: {
                alias: '接收包数/秒',
                min: 0,
                max: [[${netIoStatePckMaxVal}]]
            },
            txpck: {
                alias: '发送包数/秒',
                min: 0,
                max: [[${netIoStatePckMaxVal}]]
            }
        });
        chart5.scale('dateStr',{tickCount: 12,alias: '时间'});
        chart5.line().position('dateStr*rxpck').color('#1890ff');
        chart5.line().position('dateStr*txpck').color('#2fc25b');
        chart5.render();

        var chart6 = new G2.Chart({
            container: 'netIoStateDropPck',
            forceFit: true,
            height: 400,
            padding: [30, 40, 70, 48]
        });
        chart6.axis('dateStr', {
            label: {
                textStyle: {
                    fill: '#aaaaaa'
                }
            }
        });
        chart6.axis('dropin', false);
        chart6.tooltip({
            crosshairs: false
        });
        chart6.legend({
            position: 'top-center'
        });
        chart6.source(netIoStateJson, {
            dropin: {
                alias: '传入丢弃包数/秒',
                min: 0,
                max: [[${netIoStateDropPckMaxVal}]]
            },
            dropout: {
                alias: '传出丢弃包数/秒',
                min: 0,
                max: [[${netIoStateDropPckMaxVal}]]
            }
        });
        chart6.scale('dateStr',{tickCount: 12,alias: '时间'});
        chart6.line().position('dateStr*dropin').color('#FFD22F');
        chart6.line().position('dateStr*dropout').color('#FF5371');
        chart6.render();
    })

</script>


</body>
</html>
